<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist Jquery</title>
    <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<!--todolist Jquery实践-->
<div>
    <input id="input" type="text">
    <button id="btn">提交</button>
    <ul id="list"></ul>
</div>
<script>
    //M模型层 V视图层 P控制器
    function Page() {

    }
    $.extend(Page.prototype, {
        init: function () {
            this.bindEvents();
        },
        //控制器操作模型层处理数据
        bindEvents: function () {
            let btn = $('#btn');
            btn.on('click', $.proxy(this.handleBtnClick, this));
        },
        //控制器操作视图层DOM将数据显示
        handleBtnClick: function () {
           let inputValue=$("#input");
           let ulElem=$("#list");
           ulElem.append("<li>"+inputValue.val()+"</li>");
            inputValue.val("");
        }
    });
    let page = new Page();
    page.init();
</script>
</body>
</html>